/**
 * 字符跳动动画效果，需配合过渡动画使用
 * How to use ?
 * <div v-byteDance="'fontSizeUp'" step-time="0.2">字符跳动</div>
 * <div v-byteDance="'fontSizeUp'">字符跳动</div>
 */

export default {
  bind(el, binding) {
    const textArr = el.innerText.toString().split("");
    const targetTime = Number(el.getAttribute("step-time"));
    const animationName = binding.value;
    if (!animationName) {
      throw new Error("This directive must bind a animation name");
    }
    if (isNaN(targetTime)) {
        throw new Error("Attribute step-time must be a number,the default value is 0.5");
    }
    //stepTime单个字符跳动时间 
    const stepTime = targetTime?targetTime:0.5;
    el.innerText = "";
    textArr.forEach((i,index) => {
      let elSpan = document.createElement("span");
      elSpan.innerText = i;
      elSpan.style.display = "inline-block";
      elSpan.style.verticalAlign = "bottom";
      elSpan.style.animation = `${animationName} ${textArr.length*stepTime}s infinite`;
      elSpan.style.transformOrigin = "50% 75%";
      elSpan.style.animationDelay = `${stepTime*index}s`;
      el.appendChild(elSpan);
    });
  }
};
